import { Select, Cascader, Button } from 'antd'
import { useContext } from 'react'
import { useRecoilValue } from 'recoil'
import { reportCheckContext } from '../../_context'
import styles from './index.module.less'
import { isNullArray } from '@/utils'
import { theQuarterData } from '@/store/user'
import { userInfo } from '@/store/userInfo'
import IconSvg from '@/components/IconSvg'

export default () => {
  const {
    wordList,
    task,
    tag,
    variable,
    selectWord,
    handleTaskChange,
    handleSubmit,
    handleWordChange,
    handleVaribleChange,
    reportStatus,
    isShowBtn,
  } = useContext(reportCheckContext)

  const quarterData = useRecoilValue(theQuarterData)
  const { hospitalName } = useRecoilValue(userInfo)

  return (
    <div className={styles.top}>
      <div className={styles.base}>
        <div style={{ display: 'flex' }}>
          <div className={styles.hospital}>{hospitalName}</div>
          <div className={styles.title} style={{ marginRight: '8px' }}>
            {`${task[0]}年第${task[1]}季度`}
          </div>
          <div className={styles.title}>{wordList.find((item) => item.dataId === selectWord)?.wordName}</div>
        </div>
        {isShowBtn === 'Y' && (
          <Button
            onClick={handleSubmit}
            className={styles.exportbtn}
            type='primary'
            ghost
            icon={<IconSvg name='apply-amendment' />}
            disabled={reportStatus === '1'}
          >
            申请修改
          </Button>
        )}
      </div>
      <div className={styles.search}>
        <Cascader
          className={styles.width200}
          value={task}
          onChange={(e) => handleTaskChange(e)}
          options={quarterData}
          placeholder='请选择任务'
          displayRender={(value) => value.join('')}
          disabled
        />
        <Select
          value={selectWord}
          className={styles.width200}
          onChange={(e) => handleWordChange(e)}
          key={'value'}
          options={isNullArray(wordList) ? wordList.map((item) => ({ label: item.wordName, value: item.dataId })) : []}
          placeholder={'请选择病区'}
        />
        <Select className={styles.width200} value={tag} onChange={(e) => handleVaribleChange(e)} options={variable} />
      </div>
    </div>
  )
}
